<!--
 * 单元格组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-cell class="cell" title="基础使用"></pure-cell>
        </app-demo-module>

        <!-- 隐藏右侧图标 -->
        <app-demo-module title="隐藏右侧图标" desc="将 arrowName 设置为空即可隐藏右侧图标">
            <pure-cell class="cell" title="隐藏右侧图标" arrowName=""></pure-cell>
        </app-demo-module>

        <!-- 左侧图标 -->
        <app-demo-module title="左侧图标">
            <pure-cell class="cell" title="左侧图标" iconName="__biaoqing"></pure-cell>
        </app-demo-module>

        <!-- 单元格描述 -->
        <app-demo-module title="单元格描述">
            <view class="icons">
                <pure-cell class="cell" title="带描述的单元格" iconName="__biaoqing" desc="描述"></pure-cell>
            </view>
        </app-demo-module>

        <!-- 展开右侧图标 -->
        <app-demo-module title="展开右侧图标" :desc="['设置 expand 属性为 true 即可展开右侧图标', '默认展开旋转 90deg']">
            <view class="icons">
                <pure-cell class="cell" title="展开右侧图标" iconName="__biaoqing" desc="点击展开/关闭" :expand="expand" @tap="expand = !expand"></pure-cell>
            </view>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 展开状态
    const expand = ref(true);
</script>

<style scoped lang="scss">
    .page-layout {
        padding: 15px;
    }

    .cell {
        background: #f8f8f8;
        border-radius: 5px;
    }
</style>
